<template>
<div>
    <v-Header></v-Header>
    <p class="solution">思路：1、先获取段子列表显示在左侧。
        2、从段子中取出第一个段子的sid，获取详情，显示在中间。
        3、点击段子，切换详情
    </p>
    <div class="content">
        <!-- 左侧段子列表 -->
        <div class="left-side">
             <router-link tag="div" :to="`./${item.sid}`" :data-ss="`./${item.sid}`"
               v-for="(item,index) in jokeList" :key="index" class="content-item">
                    <div class="left-content">
                        <div class="title">{{item.text}}</div>
                    </div>
             </router-link>
        </div>
        <!-- 右侧段子详情 -->
        <div class="center">
           <router-view></router-view>
        </div>
    </div>
</div>
</template>

<script>
import vHeader from './header'
import detail2 from './detail2'
import axios from 'axios'
import {getJoke,getSingleJoke} from '../sever'
export default {
    data(){
        return{
            // 左侧段子列表
            jokeList:[]
        }
    },
    components:{
        vHeader,detail2
    },
    created(){
        this.getJokeList()
    },
    methods:{
        getJokeList(){
            axios.post(getJoke,{
                type:'text',
                count:5
            })
            .then(res=>{
                this.jokeList=res.data.result
            })
        }
    }
}
</script>

<style scoped>
  .solution {
    padding: 10px;
    background-color: #56a5f1;
    color: #fff;
  }
a{
    color: black;
    text-decoration: none;
}
    .left-side{
        position: fixed;
        width: 150px;
        top: 100px;
        left: 0px;
    }
    .title{
        padding: 8px;
        border-top: 1px  solid #666;
        border-right: 1px solid #666;  
        width: 100%;
        overflow: hidden;
         /* 不换行 */
        white-space: nowrap;
        /* 超出文字省略号 */
        text-overflow: ellipsis;
        cursor: pointer;
       
    }
    /* 选中的链接会有这个class */
    .router-link-active {
        color: #56a5f1;
    }
</style>